<title>管理员列表 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>

<!--表格插件css-->
<link rel="stylesheet" href="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">管理员列表</div>
                </header>
                <div class="card-body">
                    <form id="searchForm" class="row row-cols-lg-auto g-3 align-items-center">
                        <div class="col-12 mb-1">
                            <div class="input-group">
                                <div class="input-group-prepend search-bar">
                                    <input type="hidden" name="keywords_field" class="search-field" value="id">
                                    <button class="btn search-btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">管理员ID</button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="javascript:void(0)" data-field="id">管理员ID</a>
                                        <a class="dropdown-item" href="javascript:void(0)" data-field="name">管理员名称</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control" autocomplete="off" value="" id="keywords_values" name="keywords_values" placeholder="请输入关键词">
                            </div>
                        </div>
                        <div class="col-12 mb-1">
                            <button type="submit" class="btn btn-default me-1 sreach-all"><i class="mdi mdi-magnify"></i> 搜索</button>
                        </div>
                    </form>
                    <div id="toolbar" class="toolbar-btn-action">
                        <button id="add-btn" type="button" class="btn btn-primary me-1">
                            <span class="mdi mdi-plus" aria-hidden="true"></span> 新增管理员
                        </button>
                        <button type="button" class="state-btn btn btn-success me-1" data-status="1">
                            <span class="mdi mdi-check" aria-hidden="true"></span> 启用
                        </button>
                        <button type="button" class="state-btn btn btn-warning me-1" data-status="2">
                            <span class="mdi mdi-block-helper" aria-hidden="true"></span> 禁用
                        </button>
                        <button id="del-btn" type="button" class="btn btn-danger">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span> 删除
                        </button>
                    </div>
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/layer/src/layer.js"></script>
<!--加载插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表格插件js-->
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.js"></script>
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<script>
    let gadmin = eval('(' + '{$gadmin|json_encode|raw}' + ')');
    const requestUrl = "{:url('/admin/admin/list')}";
    let objHtml = [
        {
            'title': '编辑',
            'a-class': 'edit-btn',
            'icon': 'mdi-pencil',
            'event': (event, value, row, index) => {
                openPage({
                    url: "{:url('/admin/admin/edit')}",
                    param: {
                        id: row.id
                    }
                }, '编辑管理员页');
            }
        },
        {
            'title': '删除',
            'a-class': 'del-btn',
            'icon': 'mdi-window-close',
            'event': (event, value, row, index) => {
                delUser(row.id);
            }
        },
    ];

    /**
     * 新增按钮
     */
    $(document).on('click', '#add-btn', function () {
        openPage({
            url: "{:url('/admin/admin/add')}",
        }, '新增管理员页');
    });


    /**
     * 批量 上架/下架按钮
     */
    $(document).on('click', '.state-btn', function () {
        var self    = $(this);
        var selRows = $('#table').bootstrapTable("getSelections");
        if(selRows.length === 0){
            showErrorNotify("请至少选择一行");
            return;
        }
        var postData = [];
        $.each(selRows,function(i) {
            postData.push(this.id);
        });
        let tipsTitle = self.data('status') === 1 ? '启用' : '禁用';
        reconfirm({
            url: "{:url('/admin/admin/state')}",
            param: {idx: postData, status: self.data('status')},
            success: (res) => {
                res.code === 200 && refreshTable();
            }
        }, '确定将这些数据' + tipsTitle + '吗？', '请再次确认是否' + tipsTitle);
    });


    /**
     * 批量 删除按钮
     */
    $(document).on('click', '#del-btn', function () {
        var selRows = $('#table').bootstrapTable("getSelections");
        if(selRows.length == 0){
            showErrorNotify("请至少选择一行");
            return;
        }
        var postData = [];
        $.each(selRows,function() {
            postData.push(this.id);
        });
        delUser(postData);
    });

    // 操作方法 - 删除
    function delUser(idx) {
        reconfirm({
            url: "{:url('/admin/admin/del')}",
            param: {idx: idx},
            method: 'deletes',
            success: (res) => {
                res.code === 200 && refreshTable();
            }
        }, '确定删除吗？', '请再次确认是否删除？');
    }

    /**
     * 用于演示的列信息
     **/
    const columns = [{
        field: 'example',
        checkbox: true,
        // 是否可视(默认 - true)
        visible: true,
        // 列的宽度
        width: 5,
        // 宽度单位
        widthUnit: 'rem'
    }, {
        field: 'id',
        title: '编号',
        // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。
        // h表示横向，v标识垂直
        align: 'center',
        // 是否作为排序列
        sortable: true,
        // 当列名称与实际名称不一致时可用
        sortName: 'id',
        switchable: false,
        // 列的宽度
        width: 5,
        // 宽度单位
        widthUnit: 'rem'
    }, {
        field: 'name',
        align: 'center',
        title: '管理员名',
        width: 35,
        // 宽度单位
        widthUnit: 'rem',
    }, {
        field: 'gid',
        align: 'center',
        title: '角色',
        width: 15,
        // 宽度单位
        widthUnit: 'rem',
        formatter:function(value, row, index){
            return (value in gadmin) ? gadmin[value] : '-';
        }
    }, {
        field: 'login_num',
        align: 'center',
        title: '登录次数',
        width: 8,
        // 宽度单位
        widthUnit: 'rem',
    }, {
        field: 'is_super',
        title: '是否为超管',
        width: 10,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return (value !== 1 ? '<span class="badge bg-danger">否</span>' : '<span class="badge bg-success">是</span>');
        }
    },  {
        field: 'status',
        title: '状态',
        width: 10,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return (value !== 1 ? '<span class="badge bg-secondary">禁用</span>' : '<span class="badge bg-success">启用</span>');
        }
    }, {
        field: 'operate',
        title: '操作',
        align: 'center',
        width: 8,
        // 宽度单位
        widthUnit: 'rem',
        formatter: btnGroup(objHtml),  // 自定义方法
        events: btnEvents(objHtml),
    }];

</script>

<script type="text/javascript" src="/static/admin/js/common/table.js"></script>
<script>
    $(function () {

        $('.sreach-all').click(function () {
            refreshTable();
        });

        $('#searchForm').submit(function(){
            event.preventDefault();
        });
    });

    //下拉选择搜索项
    $('.search-bar .dropdown-menu a').click(function() {
        $(this).parents('.search-bar').find('.search-field').val(($(this).data('field') || ''));
        $(this).parents('.search-bar').find('.search-btn').html($(this).text());
    });
</script>